<template>
  <div>
    <div class="action">
      <div>
        <Checkbox
          v-if="showBox"
          v-model="checkAll"
          @on-change="handleAll"
          style="margin-right: 20px" 
          >全选</Checkbox
        >
        <Button v-if="showBox" type="error" ghost size="small" @click="delData"
          >删除
          <span v-if="delLength">({{ delLength }})</span>
        </Button>
      </div>
      <Button
        type="error"
        :ghost="showBox ? true : false"
        @click="batchManage"
        >{{ showBox ? "取消管理" : "批量管理" }}</Button
      >
    </div>

    <div class="card" v-if="list.length">
      <div v-for="(item, index) in list" :key="index" class="card-item">
        <div class="item-warp">
          <div
            class="cover-photo"
            :style="`background-image:url(${item.trainingBaseCover})`"
          >
            <Checkbox
              class="checkbox"
              v-model="item.checked"
              v-if="showBox"
              @on-change="handleItem"
            />
            <div class="pin">{{ item.scoreAvg }}分</div>
          </div>
          <div class="right">
            <p class="place text3hidden">
              {{ item.name }}
            </p>
            <p class="remaining">
              <img
                class="movie"
                :src="item.remain > 0 ? movieImg2 : movieImg"
                alt=""
              />
              <span>余:{{ item.remain }}</span>
            </p>
            <div class="bottom">
              <p
                class="button"
                :style="{
                  backgroundColor: item.remain > 0 ? '#f4333c' : '#D3D3D3',
                }"
                @click="goPage(item)"
              >
                预约
              </p>
              <p
                :class="
                  item.isCharge === '1'
                    ? 'money'
                    : item.isCharge === '0'
                    ? 'fee'
                    : ''
                "
              >
                {{
                  item.isCharge === "1"
                    ? `￥${item.unitPrice} / 小时`
                    : item.isCharge === "0"
                    ? "免费"
                    : ""
                }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <empty v-else />
    <div class="page" v-if="list.length">
      <Page
        :total="total"
        @on-change="currentHandle"
        :page-size="params.pageSize"
        show-total
      />
    </div>
  </div>
</template>

<script>
import * as myCollection from "@/api/myCollection.js";
import movieImg2 from "@/assets/base/movie2.png";
import movieImg from "@/assets/base/movie.png";
export default {
  name: "practiceBase",
  data() {
    return {
      showBox: false, //是否展示多选框
      checkAll: false, //全选
      params: {
        pageNumber: 1,
        pageSize: 9,
        type: "1002002",
      },
      list: [],
      total: 0,
      delLength: 0, //删除数据得个数

      movieImg2: movieImg2,
      movieImg: movieImg,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //获取列表数据
    getList() {
      myCollection.selectCollect(this.params).then(({ code, result }) => {
        if (code === 200) {
          this.total = Number(result.total);
          if (result.records) {
            result.records.map((ele) => {
              ele.checked = false;
            });
            this.list = result.records;
          }
        }
      });
    },
    //切换分页
    currentHandle(current) {
      this.params.pageNumber = current;
      this.getList();
    },
    //批量管理
    batchManage() {
      this.showBox = !this.showBox;
      this.list.forEach((item) => {
        item.checked = false;
      });
      this.delLength = 0;
      this.checkAll = false;
    },
    //全选
    handleAll() {
      if (this.checkAll) {
        this.list.forEach((item) => {
          item.checked = true;
        });

        this.delLength = this.list.length;
      } else {
        this.list.forEach((item) => {
          item.checked = false;
        });
        this.delLength = 0;
      }
    },
    //列表单个勾选
    handleItem() {
      this.delLength = this.list.filter((item) => item.checked).length;
    },
    //删除数据
    delData() {
      const selList = this.list.filter((item) => item.checked);
      if (!selList.length) {
        return this.$Message.error("请勾选需要删除的数据");
      }
      this.$Modal.confirm({
        title: "提示",
        content: "是否确认删除所勾选数据？",
        onOk: () => {
          let params = {
            dataIds: selList.map((item) => item.trainingBaseId),
            typeId: "1002002",
          };
          myCollection.cancelCollect(params).then(({ code, result }) => {
            if (code === 200 && result) {
              this.$Message.success("删除成功");
              this.getList();
              this.$emit("userInfo");
              this.showBox = false;
              this.delLength = 0;
            }
          });
        },
        onCancel: () => {},
      });
    },
    //跳转详情
    goPage(item) {
      this.$router.push({
        path: "/baseDetail",
        query: {
          id: item.trainingBaseId,
        },
      });
      this.$store.commit("SET_PERLEFTMENUSHOW", false);
      sessionStorage.setItem("name", "baseDetail");
    },
  },
};
</script>

<style lang="scss" scoped>
.action {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}
.card {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  justify-items: start;
  justify-content: center;
  .pin {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.6;
    color: #fff;
    padding: 5px 30px 5px 20px;
    border-radius: 0 0 30px 0;
  }
  .card-item {
    width: calc(484 / 1920 * 100vw);
    height: calc(170 / 1920 * 100vw);
    border-radius: 5px;
    margin-top: 15px;
    cursor: pointer;

    .item-warp {
      display: flex;
      .cover-photo {
        width: 50%;
        height: calc(170 / 1920 * 100vw);
        border-radius: calc(5 / 1920 * 100vw);
        background-size: cover;
        position: relative;
        .checkbox {
          position: absolute;
          right: 0px;
          top: 0px;
        }
      }
      .right {
        margin-left: calc(20 / 1920 * 100vw);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 50%;

        .place {
          font-size: calc(16 / 1920 * 100vw);
          color: #333;
          // height: calc(60 / 1920 * 100vw);
        }
        .remaining {
          .movie {
            width: calc(18 / 1920 * 100vw);
            height: calc(16 / 1920 * 100vw);
          }
          > span {
            font-size: calc(14 / 1920 * 100vw);
            color: #f4333c;
            margin-left: calc(4 / 1920 * 100vw);
          }
        }
        .bottom {
          display: flex;
          align-items: center;
          .fee {
            color: #49ae9c;
            font-size: calc(16 / 1920 * 100vw);
            font-weight: 500;
          }
          .money {
            margin-left: calc(12 / 1920 * 100vw);
            color: #f4333c;
            font-size: calc(16 / 1920 * 100vw);
          }
          .button {
            width: calc(96 / 1920 * 100vw);
            height: calc(40 / 1920 * 100vw);
            // background: #f4333c;
            border-radius: calc(4 / 1920 * 100vw);
            color: #fff;
            text-align: center;
            line-height: calc(40 / 1920 * 100vw);
            margin-right: calc(12 / 1920 * 100vw);
            cursor: pointer;
          }
        }
      }
    }
  }
}
.page {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.text3hidden {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 这里是超出几行省略 */
  overflow: hidden;
}

.ivu-checkbox-wrapper {
  margin-right: 0;
}
</style>